import ContentCard from "@/components/ContentCard/ContentCard";
import { Button, Form, Slider, Tag } from "@arco-design/web-react";
import { IconZoomIn, IconZoomOut } from "@arco-design/web-react/icon";
import React from "react";
import styled from 'styled-components';
import Panel from "./Panel";

const Wrapper = styled.div`
    position: relative;
    width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
`;

const FlexColumn = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
`;

const FlexRow = styled.div`
    position: relative;
    display: flex;
    flex-direction: row;
`;

interface IProps {
    style?: { [key: string]: string };
    url?: string;
    autoPlay?: boolean;
    isSupportPTZ?: boolean;
}

const CameraArea = (props: IProps) => {

    const { url = '', style = {}, isSupportPTZ = false } = props;

    return (
        <Wrapper style={{...style}}>
            <ContentCard
                style={{ height: '60%' }}
                title="实时监控"
                tooltip={{
                    show: true,
                    content: "设备目前的实时摄像头监控。",
                }}
            >
                <div style={{ width: '100%', height: '100%', background: 'black', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    <img src="http://www.vlf.it/serge1/boisdechabannes.JPG"></img>
                </div>
            </ContentCard>
            <ContentCard
                style={{ height: '40%' }}
                title="PTZ控制器"
                tooltip={{
                    show: true,
                    content: "PTZ控制器, 用于控制摄像头的位姿。",
                }}
            >
                <FlexColumn>
                    <Form style={{ width: '100%' }}>
                        <Form.Item label="摄像头连接状态" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                            <Tag  color='#7bc616' >已连接</Tag>
                        </Form.Item>
                    </Form>
                    <FlexRow style={{ width: '100%' }}>
                        <Panel style={{ marginRight: '12px' }}/>
                        <FlexColumn style={{ width: 'calc(100% - 200px)', justifyContent: 'flex-end' }}>
                            <Form style={{ width: '100%' }}>
                                <Form.Item label="调节灵敏度" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
                                    <Slider value={50} style={{ width: '100%' }} />
                                </Form.Item>
                            </Form>
                            <FlexRow style={{ marginBottom: '12px', justifyContent: 'flex-start' }}>
                                <Button status="warning" icon={<IconZoomIn />} style={{ marginRight: '12px', width: '100%' }}>Zoom+</Button>
                                <Button status="warning" icon={<IconZoomOut />} style={{ width: '100%' }}>Zoom-</Button>
                            </FlexRow>
                            <Button type="primary" style={{ marginBottom: '12px' }}>锁定摄像头</Button>
                            <Button status="danger">关闭摄像头</Button>
                        </FlexColumn>
                    </FlexRow>
                </FlexColumn>
            </ContentCard>
        </Wrapper>
    )
}


export default CameraArea;